<form id="frmPin">
    <div class="form-body">
        <div class="form-title" data-trans="traffic_statistics"></div>

        <div class="ko-grid-container">
            <table cellspacing="0" cellspadding="0" class="ko-grid colorHoverTable ">
                <thead>
                    <tr class="">
                        <th nowrap="nowrap" width="20%"></th>
                        <th nowrap="nowrap" width="40%" data-trans="upload"></th>
                        <th nowrap="nowrap" width="40%" data-trans="download"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-trans="speed"></td>
                        <td><label id="upload_speed"></label></td>
                        <td><label id="download_speed"></label></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="ko-grid-container">
            <table cellspacing="0" cellspadding="0" class="ko-grid colorHoverTable ">
                <thead>
                    <tr class="">
                        <th nowrap="nowrap"></th>
                        <th nowrap="nowrap" data-trans="connected_time"></th>
                        <th nowrap="nowrap" data-trans="downloaded"></th>
                        <th nowrap="nowrap" data-trans="uploaded"></th>
                        <th nowrap="nowrap" data-trans="traffic_total_traffic"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-trans="traffic_current_connection"></td>
                        <td><label id="current_time"></label></td>
                        <td><label id="current_download"></label></td>
                        <td><label id="current_upload"></label></td>
                        <td><label id="current_total_used"></label></td>
                    </tr>
                    <tr>
                        <td data-trans="traffic_current_month_data"></td>
                        <td><label id="monthly_time"></label></td>
                        <td><label id="monthly_download"></label></td>
                        <td><label id="monthly_upload"></label></td>
                        <td><label id="monthly_total_used"></label></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="form-note" style="margin-top:10px;">
            <ul>
                <li data-trans="traffic_data_approximated"></li>
            </ul>
        </div>

        <div class="form-buttons">
            <input type="button" class="btn-1 btn-primary" data-trans="clear" onclick="_clearDataCounter()" />
        </div>
    </div>
</form>

<script>
    addInterval(function() {
        refreshTs()
    }, 1000);

    function refreshTs() {
        $('#upload_speed').html(getDisplayVolume2(ts.realtime_tx_thrpt) + $.i18n.prop('speed_sec'));
        $('#download_speed').html(getDisplayVolume2(ts.realtime_rx_thrpt) + $.i18n.prop('speed_sec'));

        $('#current_time').html(transSecond2Time(ts.realtime_time));
        $('#current_download').html(getDisplayVolume2(ts.realtime_rx_bytes));
        $('#current_upload').html(getDisplayVolume2(ts.realtime_tx_bytes));
        $('#current_total_used').html(getDisplayVolume2((ts.realtime_rx_bytes + ts.realtime_tx_bytes)));

        $('#monthly_time').html(transSecond2Time(ts.monthly_time));
        $('#monthly_download').html(getDisplayVolume2(ts.monthly_rx_bytes));
        $('#monthly_upload').html(getDisplayVolume2(ts.monthly_tx_bytes));
        $('#monthly_total_used').html(getDisplayVolume2((ts.monthly_rx_bytes + ts.monthly_tx_bytes)));
    }

    function _clearDataCounter() {
        showConfirm("", "traffic_clear_confirm", function() {
            showLoading();
            window._service.resetDataCounter({}, function(result) {
                if (result.result == "success") {
                    successOverlay();
                } else {
                    errorOverlay();
                }
            });
        });
    };

    window.LTELanguageInitPart('#frmPin');
</script>